<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>index</title>
    <link rel="stylesheet" href="css/app.min.css">
    <link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet">
</head>
<body>
<header>
    <div class="container">
        <div class="navbar-header pull-left"><a href="/" class="navbar-brand">
            <img src="images/logo.png" alt="Logo" class="img-responsive" width="90"></a>
        </div>
        <nav class="collapse navbar-collapse pull-left">
            <ul class="navbar-nav nav topmenu">
                <li><a href="courses.html">课程</a></li>
                <li><a href="groups.html">小组</a></li>
                <li><a href="activities.html">活动</a></li>
                <li><a href="news.html">资讯</a></li>
                <li><a href="resources.html">文库</a></li>
            </ul>
        </nav>
        <div class="pull-right user-nav clearfix">
            <ul class="nav nav-login">
                <li><a href="">登录</a></li>
                <li><a href="">注册</a></li>
            </ul>
        </div>
    </div>
</header>
<!-- end of header -->

<div class="main">
    <div class="breadcrumb-wrapper">
        <div class="container">
        <ol class="breadcrumb">
            <li><a href="/">首页</a></li>
            <li><a href="">课程</a></li>
            <li class="active"><a href="">所有课程</a></li>
        </ol>
        </div>
    </div>
    <div class="container">
        <h3 class="main-title">视频名称</h3>        
    </div>

    <div class="video-wrapper">
        <div class="container">
            <div class="video-wrapper">
            <div class="video">
                <video id="really-cool-video" class="video-js vjs-default-skin" controls
                 preload="auto" poster="really-cool-video-poster.jpg"
                 data-setup='{}'>
                  <source src="http://7xpl2y.com1.z0.glb.clouddn.com/asdf.mp4" type="video/mp4">
                  <source src="really-cool-video.webm" type="video/webm">
                  <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a web browser
                    that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                  </p>
                </video>
            </div>
            <div class="list">
                <div class="tabs">
                    <a href="#">相关</a>
                </div>
                <ul class="related">
                    <li class="related-item"><a href="">
                            <span class="video-img"> <img src="images/course.jpg" alt=""> </span>
                            <span class="video-title">相关的视频1相关的视频1相关的视频1相关的视频1相关的视频1相关的视频1</span>
                            <span class="video-stat"><i class="fa fa-play-circle"></i>200<i class="fa fa-comment"></i>20</span>
                        </a></span></li>
                    <li class="related-item"><a href="">
                            <span class="video-img"> <img src="images/course.jpg" alt=""> </span>
                            <span class="video-title">相关的视频1</span>
                            <span class="video-stat"><i class="fa fa-play-circle"></i>200<i class="fa fa-comment"></i>20</span>
                        </a></span></li>
                    <li class="related-item"><a href="">
                            <span class="video-img"> <img src="images/course.jpg" alt=""> </span>
                            <span class="video-title">相关的视频1</span>
                            <span class="video-stat"><i class="fa fa-play-circle"></i>200<i class="fa fa-comment"></i>20</span>
                        </a></span></li>
                    <li class="related-item"><a href="">
                            <span class="video-img"> <img src="images/course.jpg" alt=""> </span>
                            <span class="video-title">相关的视频1</span>
                            <span class="video-stat"><i class="fa fa-play-circle"></i>200<i class="fa fa-comment"></i>20</span>
                        </a></span></li>  
                    <li class="related-item"><a href="">
                            <span class="video-img"> <img src="images/course.jpg" alt=""> </span>
                            <span class="video-title">相关的视频1</span>
                            <span class="video-stat"><i class="fa fa-play-circle"></i>200<i class="fa fa-comment"></i>20</span>
                        </a></span></li>
                    <li class="related-item"><a href="">
                            <span class="video-img"> <img src="images/course.jpg" alt=""> </span>
                            <span class="video-title">相关的视频1</span>
                            <span class="video-stat"><i class="fa fa-play-circle"></i>200<i class="fa fa-comment"></i>20</span>
                        </a></span></li> 
                </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<footer>
    <div class="container site-info">
        <div class="row">
            <div class="col-xs-2"><a href="/"><img src="images/logo.png" alt="" width="120"></a></div>
            <div class="col-xs-6">
                <div class="row">
                    <div class="col-xs-6">
                        <h3>统计信息</h3>
                        <p>网站总访问量 : 1365544</p>
                        <p>当前在线人数 : 42554</p>
                        <p>页面加载时间 : 0.000234</p>
                    </div>
                    <div class="col-xs-6">
                        <h3>主办单位</h3>
                        <p>南京市XXX教育学院</p>
                        <p>南京市XXX教育研究委员会</p>
                        <p>南京市XXX教育学会</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-4 contacts">
                <span>关注我们:</span>
                <a href=""><i class="contact-icon fa fa-weibo"></i></a>
                <a href=""><i class="contact-icon fa fa-weixin"></i></a>
                <a href=""><i class="contact-icon fa fa-qq"></i></a>
                <a href=""><i class="contact-icon fa fa-renren"></i></a>
                <div class="contact-detail">
                    <p><i class="fa fa-map-marker"></i>江苏省南京市</p>
                    <p><i class="fa fa-phone"></i>123-456-789</p>
                    <p><i class="fa fa-envelope"></i>1234567@qq.com</p>
                </div>
            </div>
        </div>
    </div>
    <div class="copyright">
        <p>江苏省南京市 123-456-789 1234567@qq.com</p>
        <p>备案号 © Copyright 2016</p>
    </div>
</footer>
<!-- end of footer -->

<script type="text/javascript"src="//cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript"src="js/main.min.js"></script>
<script src="//vjs.zencdn.net/5.8/video.min.js"></script>
<script type="text/javascript">
$(function(){
    var player = videojs('really-cool-video', { /* Options */ }, function() {
      console.log('Good to go!');

      this.play(); // if you don't trust autoplay for some reason

      // How about an event listener?
      this.on('ended', function() {
        console.log('awww...over so soon?');
      });
    });
});
</script>
</body>